<template>
  <div id='tmpl'>
      <div id="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
		            <router-link v-bind='{to:"/goods/goodsinfo/"+item.id}'>
		                <img class="mui-media-object" :src="item.img_url">
                        <div class="desc">
                            <div class="mui-media-body" v-text="item.title"></div>
                            <p>
                                <span>￥{{item.sell_price}}</span>
                                <s>￥{{item.market_price}}</s>
                            </p>
                            <p>
                                <h6 class="left">热卖中</h6>
                                <h6 class="right">剩余60件</h6>
                            </p>
                        </div>
                    </router-link>
                </li>
		    </ul>    
		</div>
        <mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>

  </div>
</template>
<script>
import common from '../kits/common.js';
import {Toast} from 'mint-ui';
export default {
  data () {
    return {
        list:[],
        page:1
    }
  },
  created(){
      this.getlist(this.page)
  },
  methods:{
      getlist(){
          var url = common.apidomain +'/api/getgoods?pageindex='+this.page;
          this.$http.get(url).then(function(res){
               if(res.body.status != 0){
                Toast('res.body.message');
                  return;
            }
             this.list =  res.body.message
          })
      },
      getmore(){
      this.page++;
      this.getlist(this.page);
      }
  }
}
</script>
<style lang="css" scoped>
#mui-content{
    border: 1px soli rgba(0, 0, 0, 0.4);
    margin-left: 1px;
    box-shadow: 0 0 1px #000;
}
#mui-content .mui-media-body{
    color: #0094ff;
}
#mui-content .desc{
    height: 60px;
    background-color: rgba(0, 0, 0, 0.1);

}
#mui-content ul{
    padding:5px;
}
#mui-content a{
    padding-left: 0;
}
#mui-content  li{
    margin-left: 2px;
}
.desc span{
    color: red;
    margin-right: 20px;
}
.right{
    position: absolute ;
    right: 10px;
    bottom: 0;
}

.left{
    position: absolute ;
    left: 10px;
    bottom: 0;
}
</style>